<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        var btnS = document.querySelectorAll('button');
        //1.使用that保存当前点击对象
        for (var i = 0; i < btnS.length; i++) {
            btnS[i].addEventListener('click', function () {
                var that = this;
                that.disabled = true;
                var num = 5;
                var idInte = setInterval(function (e) {
                    that.innerText = '等待' + num + '秒';
                    num--;
                    if (num < 0) {
                        clearInterval(idInte);
                        that.innerText = '按钮';
                        that.disabled = false;
                    }
                }, 1000);
            })
        }


        // 2.使用e.srcElement 或 e.target
        for (var i = 0; i < btnS.length; i++) {
            btnS[i].addEventListener('click', function (e) {
                this.disabled = true;
                var num = 5;
                var idInte = setInterval(function () {
                    e.srcElement.innerText = '等待' + num + '秒';
                    num--;
                    if (num < 0) {
                        clearInterval(idInte);
                        e.srcElement.innerText = "按钮";
                        e.srcElement.disabled = false;
                    }
                }, 1000);
            })
        }

        //3.bind
        for (var i = 0; i < btnS.length; i++) {
            btnS[i].addEventListener('click', function () {
                this.disabled = true;
                var num = 5;
                var idInte = setInterval(function () {
                    this.innerText = '等待' + num + '秒';
                    num--;
                    if (num < 0) {
                        clearInterval(idInte);
                        this.innerText = "按钮";
                        this.disabled = false;
                    }
                }.bind(this), 1000);
            })
        }

        // 4 let 块级作用域
        for (let i = 0; i < btnS.length; i++) {
            btnS[i].addEventListener('click', function () {
                btnS[i].disabled = true;
                var num = 5;
                var idInte = setInterval(function () {
                    btnS[i].innerText = '等待' + num + '秒';
                    num--;
                    if (num < 0) {
                        clearInterval(idInte);
                        btnS[i].innerText = "按钮";
                        btnS[i].disabled = false;
                    }
                }, 1000);
            })
        }

        // 5 箭头函数
        for (var i = 0; i < btnS.length; i++) {
            btnS[i].addEventListener('click', function () {

                this.disabled = true;
                var num = 5;
                var idInte = setInterval(() => {
                    // console.log(this);
                    this.innerText = '等待' + num + '秒'
                    num--
                    if (num < 0) {
                        clearInterval(idInte)
                        this.innerText = "按钮"
                        this.disabled = false;
                    }
                }, 1000)

            })
        }
    </script>

</body>

</html>